<template>
 <!-- v-if="isFollowed" -->
  <van-button
    class="follow-btn"
    round
    v-if="value"
    @click="followClick"
    :loading="isLoading"
    size="small"
  >已关注</van-button>
  <van-button
    v-else
    :loading="isLoading"
    class="follow-btn"
    type="info"
    color="#3296fa"
    round
    @click="followClick"
    size="small"
    icon="plus"
  >关注</van-button>
</template>

<script>
import { addFollow,deleteFollow } from '@/api/user'
import { mapGetters } from 'vuex'
  export default {
     name:'FollowUser',
     computed: {
       ...mapGetters(['haslogin'])
     },
     data() {
       return {
         isLoading:false  // 是否处理中
       }
     },
     props:{
       // 是否关注了
      //  isFollowed:{  
       value:{  
         type:Boolean,
         require:true 
       },
      //  作者ID
       authorId:{
         type:[Number,Object],
         require:true
       }
     },
     methods: {
      //  关注/取消关注
      async followClick() {
         // 1. 判断是否登录
        if(!this.haslogin) return this.$toast.fail('登录才可关注')
        // 2.发送请求
        this.isLoading = true 
        try {
          // if(this.isFollowed){
          if(this.value){
            // 已关注，要取消
            await deleteFollow(this.authorId)
            this.$toast.success('取消关注成功')
          }else{
            //  未关注，要关注
            await addFollow(this.authorId)
            this.$toast.success('关注成功')
          }
          // 3. 更新视图
          // this.$emit('updateFollow',!this.isFollowed)
          this.$emit('input',!this.value)
        } catch (error) {
          console.dir(error)
          this.$toast.fail('关注失败')
        }
        this.isLoading = false
       }
     },
  }
</script>

<style lang="less" scoped>

</style>